<template>
	<view class="teaIndex">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">中茶指数
			<span style="margin-left: 50%;color: red;font-size: 34rpx;">{{info.price}}</span>
			</view>
		</view>
		<view class="nav">
			<view class="nav_item" @click="selNavFun(index)" v-for="(item,index) in navList" :key="index">
				<view :class="index == selNav ? 'nav_name hover' : 'nav_name'">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="qiun-charts">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
			 disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
			<!--#endif-->
		</view>
		<view class="columnList">
			<view class="content_text" @click="jump(info.status == 0 ? 'login' : 'credits_list', 'tea_num')">
				<view>
					我的中茶：<span>{{info.nowTea}}</span>
				</view>
				<!-- <view class="content_num" @click="jump(info.status == 0 ? 'login' : 'credits_list', 'tea_num')">{{info.nowTea}}</view> -->
			</view>
			<view class="content_text"  @click="jump(info.status == 0 ? 'login' : 'trade_list')">
				<view class="myTrade">
					<image src="http://app.chinasrv.com/attachment/xcx/icon/icon5.png" mode="aspectFill"></image>
					<text>我的需求</text>
					<view class="showNum" v-if="info.tradeNum > 0">{{info.tradeNum}}</view>
				</view>
			</view>
		</view>
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" v-if="tradeList.length > 0">
			<view class="qiun-title-dot-light">买入</view>
		</view>
		<view class="content" v-for="(item,index) in tradeList" :key="index" v-if="tradeList.length > 0">
			<view class="list">
				<view>￥{{item.trade_price}}</view>
				<view>{{item.trade_num}}g</view>
				<view @click="operateFun(1, index)"><view class="btn">卖出</view></view>
			</view>
		</view>
		<view style="border-top: 16rpx rgba(57, 72, 107, 0.1) solid;" class="qiun-bg-white qiun-title-bar qiun-common-mt"  v-if="tradeSellList.length > 0">
			<view class="qiun-title-dot-light">卖出</view>
		</view>
		<view class="content" v-for="(item,index) in tradeSellList" :key="index" v-if="tradeSellList.length > 0">
			<view class="list" >
				<view>￥{{item.trade_price}}</view>
				<view>{{item.trade_num}}g</view>
				<view @click="operateFun(2, index)"><view class="btn">买入</view></view>
			</view>
		</view>
		<!-- <view class="bottom" @click="jump('addOreditAddress', optionsParam)">新增地址</view> -->
		<view class="bottom" @click="jump('tea_apply')">发布需求</view>
		<uni-popup ref="popup">
		    <view class="show">
				<view class="title">{{title}}</view>
				<input type="number" v-model="tradeNum"/>
				<view class="btn">
					<text @click="subTrade(0)" style="color: rgba(60, 72, 104, 0.4)">取消</text>
					<text @click="subTrade(1)">确认</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import uCharts from '../../components/u-charts/u-charts.js';
	var canvaLineA = null;
	export default { 
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				outputArr : [],
				dateArr :[],
				selNav : 0,
				navList: [
					{name: '近一个月', val : 1},
					{name: '近三个月', val : 2},
					{name: '近一年', val : 3}
				],
				dateType: 1,
				info: {
					status : 0,
					price : '-',
					nowTea : 0,
					day: '',
					tradeNum: 0,
				},
				tradeList: [],
				tradeSellList: [],
				title: '',
				placeholderText: '',
				tradeNum: 0,
				orderType: 1,
				orderId : 0
			}
		},
		// components: {uCharts},
		methods: {
			selNavFun(k) {
				let item = this.navList[k];
				this.selNav = k;
				this.dateType = item.val;
				this.initData();
			},
			getInfo() {
				serve.request({
					url: '/tea/index/index',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					this.info = res.data;
				});
			},
			getList() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				serve.request({
					url: '/tea/index/list',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					this.tradeList = res.data.list;
					this.tradeSellList = res.data.sellList;
				uni.hideLoading();
				});
			},
			initData:function () {
				var self = this;
				serve.request({
					url: '/tea/index/day-list',
					data: {
						appkey: uni.getStorageSync('appkey')
					}
				}).then(res => {
					let categories = [];
					let dataList = [];
					let dataAll = res.data;
					console.info(dataAll);
					let maxPrice = 0;
					dataAll.forEach((item, key) => {
						categories.push(item.day);
						dataList.push(item.price);
						if(Number(item.price) > Number(maxPrice)) {
							maxPrice = item.price;
						}
					});
					// maxPrice = Number(maxPrice) + Number(1);
					let LineA = {
						categories: categories,
						series: [{
							"name": "价格",
							"data": dataList
						}]
					};
					console.info(LineA);
					self.showLineA("canvasLineA", LineA, maxPrice);
				});
				// let LineA = {
				// 	categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
				// 	series: [{
				// 		"name": "产量",
				// 		"data": [70, 40, 65, 100, 44, 68]
				// 	}]
				// };
				// LineA.categories = ["2016", "2017", "2018", "2019", "2020", "2021"];
				// LineA.series[0].data = _self.outputArr;
				// this.showLineA("canvasLineA", LineA);
			},
			showLineA:function(canvasId, chartData, maxPrice) {
				var _self = this;
				console.info(chartData);
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'right',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						disableGrid: true,
						gridType: 'dash',
						splitNumber: Math.ceil(maxPrice / 5),
						min: 0,
						max: Math.ceil(maxPrice),
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
					context: uni.createCanvasContext(canvasId, _self),
				});
			},
			touchLineA(e) {
				console.info(1);
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				console.info(2);
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				console.info(3);
				canvaLineA.scrollEnd(e);
			},
			operateFun(type, k) {
				if (this.accessToken == '') {
					common.jump('login');
					return ;
				}
				let item = {};
				if(type == 1) {
					item = this.tradeList[k];
					this.title = "确定卖出数量";
				} else {
					item = this.tradeSellList[k];
					this.title = "确定买入数量";
				}
				this.orderId = k;
				this.orderType = type;
				this.$refs.popup.open();
			},
			subTrade(type) {
				if(type == 0) {
					this.$refs.popup.close();
					return ;
				}
				if(this.tradeNum == '') {
					uni.showModal({
						title: '提示',
						content: '数量必须为正整数',
						showCancel: false,
					});
					return ;
				}
				let item = {};
				let k = this.orderId;
				if(this.orderType == 1) { //别人买入 我卖出
					item = this.tradeList[k];
					if(this.tradeNum > this.info.nowTea) {
						uni.showModal({
							title: '提示',
							content: '卖出数量不能大于当前账户数量',
							showCancel: false,
						});
						return ;
					}
					if(this.tradeNum > item.trade_num) {
						uni.showModal({
							title: '提示',
							content: '卖出数量不能大于买入数量',
							showCancel: false,
						});
						return ;
					}
				} 
				else { //别人卖出 我买入
					item = this.tradeSellList[k];
					if(this.tradeNum > item.trade_num) {
						uni.showModal({
							title: '提示',
							content: '买入数量不能大于卖出数量',
							showCancel: false,
						});
						return ;
					}
				}
				uni.showLoading({
					title: '提交中···',
					mask: true
				});
				var self = this;
				serve.request({
					url: '/tea/trade/confirm',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: item.id,
						num: self.tradeNum
					}
				}).then(res => {
					uni.hideLoading();
					let code = res.code;
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function(res) {
							if (res.confirm && code == 200) {
								self.tradeNum = 0;
								self.getInfo();
								self.getList();
								self.$refs.popup.close();
							}
						}
					});
				});
			},
			jump(jump_type, jump_link){
				if (this.accessToken == '') {
					common.jump('login');
					return ;
				}
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			this.cWidth = uni.rpx2px(750);
			this.cHeight = uni.rpx2px(500);
			this.initData();
		},
		onShow() {
			this.getInfo();
			this.getList();
		},
		onPullDownRefresh() {
			this.initData();
			this.getInfo();
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
.teaIndex {
	padding-bottom: 100rpx;	
	.nav {
		display: flex;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		z-index: 200;
		align-items: center;
		border-bottom: 16rpx rgba(204, 204, 204, 0.3) solid;
	
		.nav_item {
			width: 50%;
			text-align: center;
	
			.hover {
				border-bottom: 8rpx rgba(251, 202, 63, 1) solid;
				color: rgba(35, 52, 91, 1) !important;
				font-weight: bold;
			}
	
			.nav_name {
				padding: 0rpx 10rpx;
				display: inline-flex;
				height: 50rpx;
				font-size: 32rpx;
				color: rgba(60, 72, 104, 0.5);
			}
		}
	}
	.qiun-bg-white {
	    background: #FFFFFF;
	}
	.qiun-title-bar {
	    /* width: 96%; */
	    padding: 10rpx 2%;
	    flex-wrap: nowrap;
	}
	.qiun-common-mt {
	        margin-top: 10rpx;
	    }
	.qiun-title-dot-light {
	    border-left: 10rpx solid rgba(251, 202, 63, 1);
	    padding-left: 10rpx;
	    font-size: 32rpx;
	    color: #000000
	}
	/* 通用样式 */
	.qiun-charts {
	    width: 750rpx;
	    height: 500rpx;
	    background-color: #FFFFFF;
		padding-top: 30rpx;
	}	
	.charts {
	    width: 750rpx;
	    height: 500rpx;
	    background-color: #FFFFFF;
	}
	.columnList {
		// margin: 0rpx 30rpx;
		padding: 20rpx 0rpx;
		display: flex;
		font-size: 34rpx;
		color: #666666;
		justify-content: space-between;
		border-top: 16rpx rgba(57, 72, 107, 0.1) solid;
		border-bottom: 16rpx rgba(57, 72, 107, 0.1) solid;
		align-items: center;

		.content_text {
			display: flex;
			align-items: center;
			width: 50%;
			text-align: center;
			view{
				width: 100%;
				span{
					// font-size: 40rpx;
					color: #FF5F60;
				}
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
					margin-top: 4rpx;
				}
				.showNum {
					// position: absolute;
					// right: 0rpx;
					width: 34rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 22rpx;
					background: rgba(235, 89, 56, 1);
					border-radius: 50%;
					margin-left: 20rpx;
				}
			}
			.myTrade{
				display: flex;
				margin-left: 20%;
			}
		}
	}
	.bottom {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: rgba(255, 255, 255, 1);
		background: #FFBC00;
		bottom: 0rpx;
		position: fixed;
	}
	.content{
		padding: 20rpx 20rpx;
		display: flex;
		font-size: 20rpx;
		color: #666666;
		justify-content: space-between;
		align-items: center;
		.list {
			display: flex;
			align-items: center;
			width: 100%;
			text-align: center;
			height: 80rpx;
			border-bottom: 1rpx rgba(57, 72, 107, 0.1) solid;
			font-size: 32rpx;
			view{
				width: 33.3%;
			}
			.btn{
				margin: 0 20%;
				background: #FFBC00;
				bottom: 0rpx;
				color: #fff;
				border-radius: 3%;
				width: 50%;
			}
		}
		.list:first-child{
			// border-top: 1rpx rgba(57, 72, 107, 0.1) solid;
		}
	}
	.show{
		width: 400rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.title{
			text-align: center;
			font-size: 32rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
		}
		input{
			padding: 20rpx 30rpx;
		}
		.btn{
			font-size: 28rpx;
			padding: 0rpx 90rpx 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>

